<template>
  <div style="width: 100%;height: 100%; overflow: hidden;" @click="clickHandler">
    <div :style="style"
         :class="{marquee: option.attribute.isMarquee}"
         @click="redirect">
      {{ cptData.value }}
    </div>

  </div>
</template>

<script>
import refreshMixin from "@/package/widget/mixins/refreshMixin";

export default {
  name: "widget-text",
  props: {
    option: Object
  },
  mixins: [refreshMixin],
  data() {
    return {
      cptData: {},
      uuid: null
    }
  },
  created() {
    this.uuid = require('uuid').v1();
    this.refreshCptData();
  },
  methods: {
    redirect() {
      if (this.option.attribute.url) {
        if (this.option.attribute.url.startsWith("view")) {
          this.$router.push(this.option.attribute.url)
          this.$emit("reload")
        } else {
          window.open(this.option.attribute.url)
        }
      }
    }
  },
  computed: {
    style() {
      const option = this.option
      const style = {
        height: '100%',
        textAlign: option.attribute.textAlign,
        color: option.attribute.textColor,
        fontSize: option.attribute.textSize + 'px',
        fontStyle: option.attribute.fontStyle,
        fontWeight: option.attribute.fontWeight,
        lineHeight: option.attribute.textLineHeight + 'px',
        backgroundColor: option.attribute.bgColor,
        fontFamily: option.attribute.textFamily,
        textDecoration: option.attribute.textDecoration,
        letterSpacing: option.attribute.letterSpacing + 'px'
      }

      if(option.attribute.isMarquee) {
        style['--duration'] = option.attribute.duration + 's'
        style['--time'] = option.attribute.waitTime + 's'
      }

      if(option.attribute.isShadow) {
        style.textShadow = `${option.attribute.shadowOffsetX}px ${option.attribute.shadowOffsetY}px ${option.attribute.shadowBlur}px ${option.attribute.shadowColor}`
      }

      if(option.attribute.isGradual) {
        style.backgroundImage = option.attribute.gradualColor
        // style.backgroundClip = 'text'
        style['-webkit-background-clip'] = 'text'
        style.color = 'transparent'
      }

      return style
    }
  }
}
</script>

<style >

.marquee {
  position: relative;
  animation: marqueeLeft var(--duration) linear var(--time) infinite;
}

@keyframes marqueeLeft {
  0% {
    left: 100%;
    transform: translateX(0);
  }

  100% {
    left: 0;
    transform: translateX(-100%);
  }
}
</style>
